<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JSON Format Converter</title>
    <link rel="stylesheet" href="../lib/codemirror.min.css">
    <link rel="stylesheet" href="../css/styles.css">
</head>
<body class="popup">
    <div class="container">
        <header>
            <div class="header-content">
                <div class="title-section">
                    <h1 data-i18n="title">JSON Format Converter</h1>
                    <p data-i18n="subtitle">Convert between JSON, JSONC, and JSON5 formats</p>
                </div>
                <div class="language-section">
                    <label for="language-select" data-i18n="language">Language</label>
                    <select id="language-select">
                        <option value="en">English</option>
                        <option value="zh_CN">简体中文</option>
                        <option value="zh_TW">繁體中文</option>
                        <option value="ko">한국어</option>
                        <option value="ja">日本語</option>
                        <option value="pt_BR">Português (Brasil)</option>
                        <option value="fr">Français</option>
                        <option value="de">Deutsch</option>
                        <option value="ru">Русский</option>
                        <option value="es">Español</option>
                        <option value="ar">العربية</option>
                    </select>
                </div>
            </div>
        </header>

        <div class="main-content">
            <div class="controls-section">
            <div class="format-controls">
                <div class="format-selector">
                    <label for="input-format" data-i18n="inputFormat">Input Format:</label>
                    <select id="input-format">
                        <option value="json">JSON</option>
                        <option value="jsonc">JSONC</option>
                        <option value="json5">JSON5</option>
                    </select>
                </div>

                <div class="convert-arrow">→</div>

                <div class="format-selector">
                    <label for="output-format" data-i18n="outputFormat">Output Format:</label>
                    <select id="output-format">
                        <option value="json">JSON</option>
                        <option value="jsonc">JSONC</option>
                        <option value="json5">JSON5</option>
                    </select>
                </div>
            </div>

            <div class="options-controls">
                <div class="option">
                    <input type="checkbox" id="minify-output">
                    <label for="minify-output" data-i18n="minify">Minify</label>
                </div>
                <div class="option">
                    <input type="checkbox" id="sort-keys">
                    <label for="sort-keys" data-i18n="sortKeys">Sort Keys</label>
                </div>
                <div class="option">
                    <label for="sort-order" data-i18n="order">Order:</label>
                    <select id="sort-order">
                        <option value="asc" data-i18n="orderAsc">A-Z</option>
                        <option value="desc" data-i18n="orderDesc">Z-A</option>
                    </select>
                </div>
                <div class="option">
                    <input type="checkbox" id="deep-sort">
                    <label for="deep-sort" data-i18n="deepSort">Deep Sort</label>
                </div>
                <div class="option">
                    <label for="indent-size" data-i18n="indent">Indent:</label>
                    <select id="indent-size">
                        <option value="2" data-i18n="indent2">2</option>
                        <option value="4" selected data-i18n="indent4">4</option>
                        <option value="tab" data-i18n="indentTab">Tab</option>
                    </select>
                </div>
            </div>
        </div>

        <div class="editor-section">
            <div class="input-panel">
                <div class="panel-header">
                    <h3 data-i18n="input">Input</h3>
                    <div class="panel-buttons">
                        <button type="button" id="clear-input" class="btn btn-sm" data-i18n="clear">Clear</button>
                        <button type="button" id="format-input" class="btn btn-sm" data-i18n="format">Format</button>
                        <button type="button" id="compress-input" class="btn btn-sm" data-i18n="compress">Compress</button>
                        <button type="button" id="escape-input" class="btn btn-sm" data-i18n="escape">Escape</button>
                        <button type="button" id="unescape-input" class="btn btn-sm" data-i18n="unescape">Unescape</button>
                        <button type="button" id="load-example" class="btn btn-sm" data-i18n="example">Example</button>
                    </div>
                </div>
                <div id="input-editor"></div>
            </div>

            <div class="output-panel">
                <div class="panel-header">
                    <h3 data-i18n="output">Output</h3>
                    <div class="panel-buttons">
                        <button type="button" id="copy-output" class="btn btn-sm" data-i18n="copyOutput">Copy</button>
                        <button type="button" id="download-output" class="btn btn-sm" data-i18n="downloadOutput">Download</button>
                        <button type="button" id="toggle-number-string" class="btn btn-sm" data-i18n="toNumbers">To Numbers</button>
                    </div>
                </div>
                <div id="output-editor"></div>
            </div>
        </div>

        <div class="error-section" id="error-section" style="display: none;">
            <div class="error-message" id="error-message"></div>
        </div>
        </div>

        <footer>
            <p>© 2025 JSON Format Converter.</p>
        </footer>
    </div>

    <script src="../lib/codemirror.min.js"></script>
    <script src="../lib/javascript.min.js"></script>
    <script src="../lib/json5.min.js"></script>
    <script src="../js/browser-i18n.js"></script>
    <script src="../js/i18n.js"></script>
    <script src="../js/converter.js"></script>
    <script src="../js/popup.js"></script>
</body>
</html>
